<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useArtistAPI } from "@/services/artist";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();

const router = useRouter();
const { getRecommendArtists } = useArtistAPI();

const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const artists = ref<any[]>([]);

// 获取推荐歌手数据
const fetchArtists = async () => {
  try {
    const res = await getRecommendArtists();
    if (res.code === 200) {
      artists.value = res.data.map((item: any) => ({
        uid: item.uid,
        name: item.uname,
        coverUrl: item.avatarUrl || userStore.defaultAvatarUrl,
        fansCount: Math.floor(Math.random() * 10), // 临时使用随机数
      }));
      console.log("获取推荐歌手成功:", artists.value);
    }
  } catch (error) {
    console.error("获取推荐歌手失败:", error);
  }
};

const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  fetchArtists();
};

const formatFansCount = (count: number) => {
  return count > 10000 ? `${Math.floor(count / 10000)}万` : count;
};

const handleArtistClick = (uid: string) => {
  router.push(`/artist/${uid}`);
};

onMounted(() => {
  fetchArtists();
});
</script>

<template>
  <div class="p-8">
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
      <div
        v-for="artist in artists"
        :key="artist.uid"
        class="group cursor-pointer flex flex-col items-center transition-transform hover:scale-105"
        @click="handleArtistClick(artist.uid)"
      >
        <div class="relative w-40 h-40 mb-3">
          <div class="absolute inset-0 rounded-full"></div>
          <img
            :src="artist.coverUrl"
            class="w-full h-full object-cover rounded-full hover:opacity-90 transition-opacity"
            :alt="artist.name"
          />
        </div>
        <p
          class="mt-2 text-sm font-medium text-center text-gray-800 group-hover:text-red-500"
        >
          {{ artist.name }}
        </p>
        <p class="text-xs text-gray-500">
          {{ formatFansCount(artist.fansCount) }} 听众
        </p>
      </div>
    </div>

    <!-- <div class="flex justify-center mt-12">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
      />
    </div> -->
  </div>
</template>

<style scoped>
.grid {
  max-width: 1400px;
  margin: 0 auto;
}
</style>
